<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML+CSS时尚卡片</title>
    <link rel="stylesheet" href="./style/index.css">
</head>
<body>
    <div class="con">
        <div class="box bicycle">
            <div class="top">
                <img src="./images/bicycle-solid.svg" alt="自行车">
            </div>
            <div class="bottom">
                <h2>自行车</h2>
                <p>自行车是人类发明的最成功的一种人力机械之一，它是由许多简单机械组成的复杂机械。</p>
            </div>
        </div>
        <div class="box car">
            <div class="top">
                <img src="./images/car-side-solid.svg" alt="汽车">
            </div>
            <div class="bottom">
                <h2>汽车</h2>
                <p>汽车（Automobile），是一种自带动力装置的陆地交通工具，主要用于载人或货物。</p>
            </div>
        </div>
    </div>
</body>
</html>